<template>
  <el-drawer v-model="visible" title="个人中心" size="40%">
    <el-tabs class="demo-tabs">
      <el-tab-pane label="基本信息" v-loading="loading">
        <el-form :model="formData" :rules="ruleForm" label-width="100px" class="mt30" ref="formDataRef">
          <el-row :gutter="20">
<!--            <el-col :span="24" class="mb20">-->
<!--              <el-form-item prop="avatar">-->
<!--                <ImageUpload v-model:imageUrl="formData.avatar" borderRadius="50%">-->
<!--                  <template #empty>-->
<!--                    <el-icon>-->
<!--                      <Avatar/>-->
<!--                    </el-icon>-->
<!--                    <span>请上传头像</span>-->
<!--                  </template>-->
<!--                </ImageUpload>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="24" class="mb20">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formData.username" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="手机" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" class="mb20">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item>
                <el-button type="primary" @click="handleSaveUser"> 更新个人信息</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="安全信息">
        <el-form :model="passwordFormData" :rules="passwordRuleForm" label-width="100px" class="mt30">
            <el-row :gutter="20">
              <el-col :span="24" class="mb20">
                  <el-form-item label="原密码" prop="password">
                     <el-input v-model="passwordFormData.password" placeholder="请输入密码" type="password"></el-input>
                  </el-form-item>
              </el-col>
<!--              <el-col :span="24" class="mb20">-->
<!--                  <el-form-item label="新密码" prop="newpassword1">-->
<!--                    <strength-meter-->
<!--                        v-model="passwordFormData.newpassword1"-->
<!--                        :minlength="6"-->
<!--                        :maxlength="16"-->
<!--                        placeholder="请输入新密码"-->
<!--                        @score="passwordScore"-->
<!--                    ></strength-meter>-->
<!--                  </el-form-item>-->

<!--              </el-col>-->


            </el-row>

        </el-form>


      </el-tab-pane>

    </el-tabs>

  </el-drawer>



</template>
<script setup name="personal">
//todo
import {ref,reactive} from 'vue'

const visible = ref(false)
const loading = ref(false);
// 定义变量内容
const formData = ref({
      userId: '',
      username: '',
      name: '',
      email: '',
      avatar: '',
      nickname: '',
      phone: ''
    })

//暂时不校验
const ruleForm = reactive({
})

const passwordFormData = reactive({
  password: '',
  newpassword1: '',
  newpassword2: '',
});
const handleSaveUser = ()=>{
  console.log("修改用户信息")
}

</script>
<!--增加样式-->
<style >

</style>